import { Revoke } from '@react-vant/icons';
import { createFromIconfontCN } from '@react-vant/icons'
import styles from './index.module.less'
import { Input, Uploader } from 'react-vant';
import toast from 'react-hot-toast'
import { useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router';
import axios from '@/api'

export default function NoteAdd() {
    const navigate = useNavigate()
    const [searchParams] = useSearchParams()
    const memory = searchParams.get('memory')
    const IconFont = createFromIconfontCN('//at.alicdn.com/t/c/font_4986959_90hi0e4olv.js');
    const [title, setTitle] = useState(''); // 标题
    const [content, setContent] = useState(''); // 内容
    const [imgList, setImgList] = useState([]);

    const notePublish = () => {
        axios.post('/saveNote', {
            title,
            content,
            images: imgList,
            type: memory,
            create_time: new Date().getTime(),
        }).then(res => {
            console.log(res)
            toast.success(res.msg)
            navigate(-1)
        }).catch(err => {
            console.log('发布失败', err);
            toast.error(err.msg)
        })
    }

    return (
        <div className={styles['note-wrapper']}>
            <div className={styles['note-header']}>
                <div className={styles['back']} onClick={() => {
                    navigate(-1)
                }}>
                    <Revoke fontSize={30} />
                </div>
                <div className={styles['kg']}></div>
                <div className={styles['save']}>
                    {/* <IconFont name="icon-cuncaogao" fontSize={30} /> */}
                    存草稿
                </div>
                <div className={styles['publish']} onClick={notePublish}>发布</div>
            </div>
            <div className={styles['note-imges']}>
                {/* <Uploader
                    maxCount={9}
                    value={imgList}
                    className={styles['note-add-imges']}
                    uploadIcon={<IconFont name="icon-jiahao" fontSize={30} />}
                    onChange={(files) => {
                        setImgList(files)
                    }}
                /> */}
                <Uploader
                    maxCount={9}
                    value={imgList}
                    className={styles['note-add-imges']}
                    uploadIcon={<IconFont name="icon-jiahao" fontSize={30} />}
                    onChange={(files) => {
                        // 确保files是数组且每个文件都有base64属性
                        const processedFiles = files.map(file => ({
                            ...file,
                            base64: file.base64 || file.url // 适配不同版本的Uploader组件
                        }));
                        setImgList(processedFiles);
                    }}
                />
            </div>
            <div className={styles['note-content']}>
                <Input
                    placeholder="添加标题"
                    value={title}
                    onChange={setTitle}
                    clearable
                    clearTrigger="always"
                    showWordLimit
                    maxLength={20}
                    style={{
                        height: 40,
                        fontSize: 24,
                        caretColor: '#fd1201',
                        backgroundColor: '#fff',
                        padding: 10,
                    }}

                />
                <Input.TextArea
                    placeholder="添加正文"
                    showWordLimit={({ currentCount }) => <span>已经输入{currentCount}个字啦 ✍️</span>}
                    value={content}
                    onChange={setContent}
                    style={{
                        fontSize: 20,
                        caretColor: '#fd1201',
                        backgroundColor: '#fff',
                        padding: 10,
                        boxSizing: 'border-box',
                    }}
                />
            </div>
        </div>
    )
}
